<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>SDK</title>
    <script>
        window.onlo = {}, window.onlo.m_53_version = "1"; // sdk版本 1:移动端版本 2:内网测试版
        window.phone_type = navigator.userAgent.toLowerCase().indexOf('iphone') ? "ios" : "android"; // 手机系统
        var jsType = 'min';// min | js
        window.domain_type = window.onlo.m_53_version === "2" ? "71baomu" : "53kf"; // 域名主体
        var company_id = '10012964';// 公司id
        var style = "<% $style %>" || 1; // 风格
        var style_id = "<% $style_id %>"; // 风格id
        var guest_id = "<% $guest_id %>"; // 访客id
        var arg = "10012964"; // 
        var host = "talk.71baomu.com"; // 
        var kfs3_host = "kfs3.71baomu.com"; //
        // var http_pro = (document.location.protocol == 'https:')?'https://':'http://';//区分HTTP和HTTPS
        var http_pro = 'https://';//区分HTTP和HTTPS
        var urlFlag = true;// 上传初始化变量


    </script>
    <script type="text/javascript" src="./public/jquery.min.js"></script>
    <script type="text/javascript" src="./public/webuploader/webuploader.js"></script>
    <script type="text/javascript" src="./public/socket.io.js"></script>
    <link rel="stylesheet" type="text/css" href="./public/webuploader/webuploader.css">
    <link rel="stylesheet" href="./src/css/m_sdk.css">
    <link rel="stylesheet" href="./src/css/pickerView.css">
    <link rel="stylesheet" href="./public/iconfont/iconfont.js">
    <link rel="stylesheet" href="./public/iconfont/iconfont.css">
    <script>document.write("<script type='text/javascript' src='./sdk_list.js?v="+new Date().getTime()+"'><\/script>")</script>

	
    <style>

    /* ============================= 皮肤设置 begin ==================================== */
    
    
    
    /* 系统消息 */
    #mobile .kf-talk .system-remind {
        text-align: center;
        margin-bottom: 1.6rem;
    }
    #mobile .kf-talk .pc-time {
        text-align: center;
        margin-bottom: 1.6rem;
    }
    #mobile .kf-talk .system-remind label {
        display: inline-block; 
        padding: 0.5rem 1rem;
        border-radius: 0.4rem;
        margin:0 2rem;
        margin-top: 1.6rem;
        text-align: left;
    }
    /* ============================= 皮肤设置 end ==================================== */
   	.input-wrap .text-holder #btnSend.hasMessage{
        color: #218BFC !important;
    }
	.talk-content{
		padding-bottom: 1.6rem;
	}

    #kf_info>li{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

    #talk_content .upload-wrap{
        overflow: hidden;
    }
    #talk_content .upload-wrap .msg_file {
        position: relative;
        width: 22rem;
        background-color: #fff;
        position: relative;
        box-sizing: border-box;
        padding:0.8rem;
    }
    #talk_content .upload-wrap .process-wrap {width:100%;height:0.4rem;
    }
    #talk_content .upload-wrap .process-wrap .processLong{
        width:100%;background: #DDE5ED;
    }
    #talk_content .upload-wrap .process-wrap .processSmall {display:inline-block;width:0;height:100%;background:#60B975;float:left;
    }
    #talk_content .upload-wrap .msg_img{
        max-width: 32rem;
        background-color: #fff;
        box-sizing: border-box;
        position: relative;
    }
    #talk_content .upload-wrap .msg_img .process-wrap {
        position:absolute;bottom:0;left:0;
    }
    #talk_content .upload-wrap .msg_img>img{
        /*width: 100%;*/
        vertical-align: middle;
    }
    #talk_content .upload-wrap img{
        cursor: zoom-in;cursor:-webkit-zoom-in;
    }
    #talk_content .upload-wrap .msg_file .file-header{
        height: 1.6rem;
        margin-bottom: 1.2rem;
        line-height: 1.6rem;
    }
    #talk_content .upload-wrap .msg_file .file-header .fileName{
        color:#000;
        max-width:15rem;
        display: inline-block;
        /* overflow: hidden; */
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    #talk_content .upload-wrap .msg_file .process-wrap {
        margin-bottom: 0.8rem;
        position: relative;
    }
    #talk_content .upload-wrap .msg_file .process-wrap .processLong{
        width: 85%;
        height: 100%;
        float: left;
    }
    #talk_content .upload-wrap .msg_file .upload-button{
        width:1.1rem;height:1.1rem;background:url(./src/img/upload-button-grey.png) no-repeat;background-image:url(./src/img/upload-button-grey.svg),none; background-size: 100%;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top:-0.55rem;
    }
    #talk_content .upload-wrap .msg_file.msg_video{
        width: 20rem;
        background:#<% $mobile_settings[w_kh_air] %>;
        padding:0;
        height: 15rem;
        position: relative;
        overflow: hidden;
    }
    #talk_content .upload-wrap .msg_file.msg_video>video{
        width: 100%;
        vertical-align: middle;
        max-height: 14rem;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }
    #talk_content .upload-wrap .msg_file.msg_audio{
        width: 26rem;
        /*background:#<% $mobile_settings[w_kh_air] %>;*/
        padding:0.3rem;
    }
    #talk_content img{
        max-height: 24rem;
        max-width: 32rem;
    }
    #talk_content .upload-wrap .msg_file.msg_audio>audio{
        width: 100%;
        max-width: 26rem;
        vertical-align: middle;
    }
    audio::-internal-media-controls-download-button {display:none;}
    audio::-webkit-media-controls {overflow: hidden !important}
    /*audio::-webkit-media-controls-enclosure {width: calc(100% + 32px);}*/
    
    #talk_content .upload-wrap .msg_file.msg_video .video_bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        display: block;
        z-index: 6666;
    }

    /*客服名称过长变省略号*/
    .fk-name{
        float: left;
        line-height: 4rem;
        max-width: 20rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #mobile .kf-group .kf-group-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #mobile .kf-group .kf-group-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 24rem;
    }

    /*场景引导*/
    .form_btn_box {
       width: 100%;
       position: relative;
       display: block;
       overflow: hidden;
       margin-bottom: 1.6rem;
   }
   .form_option_btn {
       font-size: 1.2rem;
       margin-left: 1rem;
       margin-bottom: .5rem;
       color: #3B99FC;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 28rem;
       display: inline-block;
       height: 2.8rem;
       line-height: 2.6rem;
       border: .1rem solid #3B99FC;
       border-radius: .2rem;
       background: #FFF;
       padding: 0 1rem;
       text-align: center;
       cursor: pointer;
       float: right;
   }
   .form_option_btn:hover{
    background: #3B99FC;
    border-color: #3B99FC;
    color: #FFF;
   }

   .from_box{
    position: relative;
    height: 2.8rem;
    border-radius: .4rem;
    font-size: 1.2rem; 
    margin-bottom: .5rem;
    width: 100%;
   }
   .from_input{
    height: 2.8rem;
    border-radius: .2rem;
    width: 100%;
    padding: 0 1rem;
    border: .1rem solid #CED5E0;
   }
   .from_box.form_phone.ischeck{
    padding-right: 9rem;
    box-sizing: border-box;
   }
   .phone_ver_code{
    position: absolute;
    right: 0;
    top: 0;
    background: #3B99FC;
    color: #FFF;
    height: 2.8rem;
    text-align: center;
    line-height: 2.8rem;
    width: 8.5rem;  
    cursor: pointer;
    border-radius:.2rem;
    display: none;
   }
   .from_box.form_phone.ischeck .phone_ver_code{
    display: block;
   }
   .phone_ver_code:hover{
    background: #4DA2FD;
   }
   .phone_ver_code:active{
    background: #3489E2;
   }
   .form_send{
    width: 100%;
    display: inline-block;
    height: 2.8rem;
    line-height: 2.6rem;
    border: .1rem solid #3B99FC;
    border-radius: .2rem;
    color: #FFF;
    background: #3B99FC;
    padding: 0 1rem;
    text-align: center;
    cursor: pointer;
   }
   .form_send:hover {
       background: #4EA3FC;
       border-color: #4EA3FC;
   }
   .form_send:active {
       background: #3489E2;
       border-color: #3489E2;
   }
   .form_loding{
    background:url(/style/chat/new2017/image/png/loading8.gif) center center no-repeat;
    background-image:url(/style/chat/new2017/image/svg/loading9.svg),none;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-block;
   }
   .error_import{border: .1rem solid #F44024 !important; }
   .preview_loding{
    background:url(/style/chat/new2017/image/png/loading8.gif) center center no-repeat;
    background-image:url(/style/chat/new2017/image/svg/loading9.svg),none;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-block;
   }
   .guide_f{
      background:#FFF;border: .1rem solid #CED5E0;max-width: 30rem;padding: .8rem;
   }
    /*结束对话功能隐藏*/
    .end-talk {
        visibility: hidden !important;
    }
    .net_error_disabled{
        opacity: 0.6;
        filter: alpha(opacity=60);
        pointer-events:none;
    }
   	#loading_box{
   		background-color: #FFF;
   		position: fixed;
   		top: 0;
   		bottom: 0;
   		right: 0;
   		left: 0;
   		z-index: 99;
   		display: none;
   	}
	#loading {
		position: absolute;
		top: 45%;
		left: 50%;
		margin: -7.5rem 0 0 -10rem;
		width: 20rem;
		height: 15rem;
		text-align: center; 
	}
	#loading .bounce {
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
		background-color: #969494;
		border-radius: 50%;
		margin: 6rem 0.2rem 0;
		animation: loading 1s infinite; 
	}
	#loading .bounce2 {
		animation-delay: 0.25s; 
	}
	#loading .bounce3 {
		animation-delay: 0.5s; 
	}
	#loading p{
		display: none;
		margin-top: 5rem
	}
	@keyframes loading {
	0%, 100% {
		transform: scale(0); 
	}
	50% {
		transform: scale(1); } 
	}

    </style>
</head>
<body>
<div id="mobile" class="newchat_type">
	<div id="loading_box">
		<div id="loading">
		    <span class="bounce bounce1"></span>
		    <span class="bounce bounce2"></span>
		    <span class="bounce bounce3"></span>
			<p id='itp_text'>由于网络原因系统初始化失败，请稍后重试</p>
		</div>
	</div>
    <div class="imgMask"><img src="" alt=""></div>
    <div class="mask moreBg"></div>
    <div class="more-wrap color-grey-deep font14">
        <s></s>
    </div>
    <div style="display:none;" class="net-error font13 color-red" id="net_error"><span onclick="location.reload();" class="reload font13 color-blue">刷新</span></div>
    <div style="display:none;" id="toast" class="toast font14"><span class="toast-text" id="toast_text"></span></div>
    <div class="mobile-header font16">
        <div href="javascript:;" class="returnToTop">
            <span>
                <svg t="1540552351656" class="icon" style="width:100%;height:100%;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6811" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M681.6 171.733333L341.333333 512l340.266667 340.266667-64 64L213.333333 512l404.266667-404.266667z" fill="#FFF" p-id="6812"></path></svg>
            </span>
        </div>
    </div>
    <div class="mobile-content">
        <div class="mask mask2"></div>
        <div class="select-kf"><!--客服列表-->
            <div class="select-kf-title font14 color-grey-deep"></div>
            <div class="kf-groups" id="kf_groups">
            </div>
        </div>
        <div class="kf-talk"><!--对话-->
            <!-- 客服信息 -->
            <ul class="kf-info-wrap font13" id="kf_info">
            </ul>
            <div class="line-up font14 color-grey-deep" id="wait">
                <p class="connection_busy"></p>
                <p>您正排在第<span class="line-up-num color-red" id="wait_cnt"></span>位</p>
            </div>
            <div class="talk-content-wrap">
                <div class="talk-content-innerWrap">

                    <!-- <div class="scrollbar-wrap"><div class="scrollbar"></div></div> -->
                    <div class="<% if $mobile_con[mobile_record] eq'1'%> has_history<%/if%> talk-content isAnimate" id="talk_content">
                        <div class="loading-wrap">
                            <span class="loading-bg fl"></span><span class="loading-text fl">下拉刷新</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="talk-inputArea">
                <div class="popup" style="display: none">
                    <div>
                        <div class="feature-pic">
                            <label id="photoBtn" for="photoFile" class="input-icon icon-pic">
                                <i class="input-icon icon-uploadImg"></i>
                                    <input id="photoFile" type="file" accept="mobiles/image/gif, mobiles/image/jpeg, mobiles/image/jpg, mobiles/image/png">
                            </label>
                            <p>图片</p>
                        </div>
                        <div class="feature-file" id="uploader">
                            <span id="file-picker" class="input-icon icon-file"></span>
                            <p>文件</p>
                        </div>
                        <div class="feature-evaluate evaluate">
                            <span class="input-icon icon-evaluate"></span>
                            <p>评价</p>
                        </div>
                        <div class="feature-close end-talk" style="width:5.2rem">
                            <span class="input-icon icon-close" style="margin:0 auto"></span>
                            <p>结束对话</p>
                        </div>
                    </div>
                </div>
                <div class="input-bar">
                    <div class="input-wrap">
                        <div id="featureBtns" class="feature-holder">
                            <a id="emojiBtn" class="feature-btn" title="表情">
                                <i class="input-icon icon-emoji"></i>
                            </a>
                            <a id="foldBtns" class="feature-btn">
                                <i class="input-icon icon-fold"></i>
                            </a>
                            <div class="feature-humanc to-service" style="display: none">
                                <span class="input-icon icon-human"></span>
                                <p style="line-height: 1rem;width:100%;float: left;color:#62778C;font-size:0.9rem;margin-top: 0.3rem">人工</p>
                            </div>
                        </div>
                        <div class="text-holder">
                            <textarea class=" font14" id="textarea" placeholder="请输入..."></textarea>
                            <a id="btnSend" style="position: absolute; top: 0.1rem; right: 0.2rem; width: 4.6rem; height: 4.4rem; text-align: center; line-height: 4.4rem; color: #62778C;" class="font14">发送</a>
                        </div>
                    </div>
                </div>
                <ul class="match-question-lists" id="robot_match_ques">
                </ul>
                <div class="facebox"></div>
                <!-- <div id="block_notice" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: block;bottom: 0;right: 0;background: #FFF;border-top: 1px solid #F2F2F2;line-height: 4.5rem;text-align: center;display: none;">抱歉，客服系统暂时无法使用！</div> -->
                <!-- <div id="after_close">对话已结束，您可以<a class="to_new">开始新对话</a></div> -->
            </div>
        </div>
    </div>
</div>
</body>
<script>


// css缓存初始化（开发结束后删除）
var timer = new Date().getTime();
$('link').each(function(index, el) {
	var hre = $(el).attr('href') + '?v=' + timer;
	$(el).attr('href',hre);
});




</script>


<!-- <script>
    function init_setting(){
        return {
            fresh_text : SdkList.m_53_fresh_text,
            fresh_no_text: SdkList.m_53_fresh_no_text
        }
    }
</script> -->

<script>document.write("<script type='text/javascript' src='./src/"+jsType+"/new_keyboardSDK.js?v="+new Date().getTime()+"'><\/script>")</script>
<script>document.write("<script type='text/javascript' src='./src/"+jsType+"/commonFunctionSdk.js?v="+new Date().getTime()+"'><\/script>")</script>
<script>document.write("<script type='text/javascript' src='./src/"+jsType+"/MobileClientSdk.js?v="+new Date().getTime()+"'><\/script>")</script>
<script>document.write("<script type='text/javascript' src='./src/"+jsType+"/footSdk.js?v="+new Date().getTime()+"'><\/script>")</script>

<script>

    // 获取ios系统版本号,ios11现阶段单拎
    if(navigator.userAgent.indexOf('iPhone') > -1){
        var ver = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);
        var iosType = ver[1].split(/_/g)[0];
        if(iosType == 11){
            document.write("<script type='text/javascript' src='./src/"+jsType+"/serverSdkForXI.js?v="+new Date().getTime()+"'><\/script>")
        }else{
            document.write("<script type='text/javascript' src='./src/"+jsType+"/serverSdk.js?v="+new Date().getTime()+"'><\/script>")
        }
    }else{
        document.write("<script type='text/javascript' src='./src/"+jsType+"/serverSdk.js?v="+new Date().getTime()+"'><\/script>")
    }

</script>


<script>

    /* SdkUI初始化 配置文件sdk_list.js*/
    // 标题栏颜色
    $(".mobile-header").css('backgroundColor',SdkList.m_53_tit_bgcolor);  
    // 客服消息气泡背景与字体颜色
    setTimeout(function(){
    // 提示语
    $(".connection_busy").html(SdkList.m_53_connection_busy);
    $("#net_error").html(SdkList.m_53_net_error);
    $(".select-kf-title").html(SdkList.m_53_zdkf_prompt);   

    $(".mobile-content").css("paddingTop")
    }, 0)
    // 标题栏显示和隐藏
    SdkList.m_53_header_show == "1" ? ($(".mobile-header").show(),$(".mobile-content").css("paddingTop","4.4rem")) : ($(".mobile-header").hide(),$(".mobile-content").css("paddingTop",0));
    // 返回上一级
    $("#mobile").on("click",".returnToTop",function(){
        window.webkit.messageHandlers.backUp.postMessage("back");
    })
</script>
<script>


//横竖屏判断以及特殊处理
$(function () {

    //ios video标签判断
    if(navigator.userAgent.indexOf('iPhone') > -1){
        $("#talk_content").addClass("is_ios")
        // sdk取消ios的文件上传按钮
        console.log($(".feature-file"),'sfg5637647875859')
        $(".feature-file").hide();
    }

    //横竖屏初始化判断
    var orientat = (typeof window.orientation === 'number' &&
            typeof window.onorientationchange === 'object');
    if(orientat){
        var updateOrientation = function(){
            var orientation = window.orientation;
            switch(orientation){
                case 90:
                case -90:
                $("html").addClass("media_font")
                break;
                default:
                $("html").removeClass("media_font")
                break;
            }
        };
        updateOrientation();
    }else{
        if($(window).width()>$(window).height()){
            $("html").addClass("media_font")
        }else{
            $("html").removeClass("media_font")
        }
    }
    //监听横竖屏事件
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if(orientat){
            if (window.orientation === 180 || window.orientation === 0) {
                $("html").removeClass("media_font")
            }
            if (window.orientation === 90 || window.orientation === -90 ){
                $("html").addClass("media_font")
            }
        }else{
            if($(window).width()>$(window).height()){
                $("html").addClass("media_font")
            }else{
                $("html").removeClass("media_font")
            }
        }
    }, false);

    // 全部加上滚动复位
    $('textarea').blur(function(){
         // 滚动复位
         document.activeElement.scrollIntoViewIfNeeded(true);
    })
    $('input').blur(function(){
         // 滚动复位
         document.activeElement.scrollIntoViewIfNeeded(true);
    })
})

    $('#mobile').css("width","100%");
	//隐藏机器人反馈无用后的显示项
    $(document).on("click",function(e){
        $(".unuse-info-wrap").removeClass("open");
    })
    // 取消默认事件
    $(".kf-talk").get(0).addEventListener("touchmove", function (e) {
        receiveMessage_bool = false;
        e.preventDefault();
    },{passive: false})

    // 加载表情
    var imgHtml="";
    for (var i = 1; i < 36; i++) {
        imgHtml += "<p><img data-isFace='yes' src='./src/img/53c_min/53c_" + i + ".gif?8'/></p>";
    }
    $(".facebox").append(imgHtml);
    var faceArr = ['[拜拜]','[鄙视]','[打电话]','[打哈欠]','[大哭]',
                    '[大笑]','[得意]','[点赞]','[愤怒]','[鼓掌]',
                    '[嘿哈]','[滑稽]','[欢迎]','[奸笑]','[沮丧]',
                    '[开心]','[可伶]','[流汗]','[卖萌]','[破涕为笑]',
                    '[敲打]','[胜利]','[调皮]','[无语]','[捏脸]',
                    '[抱抱]','[摊手]','[比心]','[便便]','[加油]',
                    '[礼物]','[哈士奇]','[成交]','[心碎]','[月亮]'];

    var textarea = document.getElementById("textarea");


    //点击更多切换按钮框显示隐藏(变色)
    $("#foldBtns").on("click",function(e){
        $("#file-picker div").eq(1).css({"width":"4rem","height":"5.6rem"});
        $("input").blur();
        var bool = $(".icon-fold").hasClass("isOpen");
        chatAnimate.display_popup(!bool);
        e.stopPropagation();
    })

    // if(is_huawei){
    //         // 点击表情插入到表单中
    //     $(".facebox").on("click","img",function(e){
    //         var index = $(this).parents("p").index();
    //         chatAnimate.insertAtCaret(textarea,faceArr[index]);
    //         $("#btnSend").addClass("hasMessage");
    //         e.stopPropagation();
    //     })

    //     // 点击表情图标，切换表情框显示隐藏
    //     $("#emojiBtn").on("click",function(e){
    //         $("input").blur();
    //         $(".icon-emoji").css({"transform":"roteta(45deg)"})
    //         var bool = $(".icon-emoji").hasClass("isOpen");
    //         chatAnimate.display_facebox(!bool);
    //         e.stopPropagation();
    //     })
    // }else{
    // 点击表情插入到表单中
    $(".facebox").on("touchstart","img",function(e){
        var index = $(this).parents("p").index();
        chatAnimate.insertAtCaret(textarea,faceArr[index]);
        $("#btnSend").addClass("hasMessage");
        e.stopPropagation();
    })

    // 点击表情图标，切换表情框显示隐藏
    $("#emojiBtn").on("touchstart",function(e){
        $("input").blur();
        var bool = $(".icon-emoji").hasClass("isOpen");
        chatAnimate.display_facebox(!bool);
        e.stopPropagation();
    })
    // }
    $(document).click(function(){
        chatAnimate.display_popup(false);
    });
    // 点击问题列表后，改变字体颜色
    $(".talk-content").on("click",".question-lists li",function(){
        $(this).addClass("visited");
    })
    // 机器人答案推送没用按钮点击
    $(".talk-content").on("click",".unuse",function(event){
        var $parent = $(this).parents(".pc-service");
        $parent.find(".unuse-info-wrap").addClass("open");
        if($parent.next().length<=0){
            chatAnimate.scroll_bottom();
        }
        event.stopPropagation();
    });
    // 点击图片展示
    $("#mobile").not(".minchat_type").on("click",".pc-customer-info img,.pc-service-info img",function(){
        if($(this).hasClass('img_53kf_face')) return false;
        $(".imgMask img").attr("style","").attr("src",$(this).attr("src")).parent().show();
    })
    $(".imgMask").click(function(){
        $(this).hide();
    });

    //视频播放
    $("#talk_content").on("click",".video_bg",function(){
        $(this).hide().prev().show();
        var de = document.documentElement;
        if(de.requestFullscreen){
            $(this).prev().get(0).requestFullscreen();
        }else if(de.mozRequestFullScreen){
            $(this).prev().get(0).mozRequestFullScreen();
        }else if(de.webkitRequestFullScreen){
            $(this).prev().get(0).webkitRequestFullScreen();
        }
        $(this).prev().get(0).play();
        $("video").hide();
        $(".video_bg").show();
    })
    
    //转人工
    $(".feature-humanc").on("click",function(){
        $(".popup>div").css("width","100%");
    })
    // 图文上传方法（域名，公司id）
    var fileUL = function(alias,cid){
    if(!urlFlag) return false;

            //==========================  上传   ===================================
        var FileUpload = function(picker,uploadURL,acceptObj){

            this.picker = picker;
            this.width = "";
            this.height = "";
            this.uploadURL = uploadURL;
        };

        FileUpload.prototype = {
            init: function(){
                var upload = this.create();
                this.bindEvent(upload);
                return upload;
            },
            create: function(){
                var uploader = WebUploader.create({

                    // 选完文件后，是否自动上传。
                    auto: true,
                    compress: null,
                    swf: './public/webuploader/Uploader.swf',
                    server: this.uploadURL,
                    pick: {
                        id: '#'+this.picker,
                    },
                    fileVal: 'userupload',
                    duplicate: true
                });
                return uploader;
            },
            bindEvent: function(uploader){
                _this = this;
                has_opened = true;
                uploader.on('fileQueued', function(file) {
                file.ext = file.ext.toLowerCase();
                 // 如果在排队中 阻止上传
                if($(".line-up").css("display")=='block'){
                    uploader.cancelFile( file );
                    return false;
                };
                //如果存在文件在上传，阻止上传
                if(this.getStats().progressNum>=1){
                    uploader.cancelFile( file );
                    alert("请稍后")
                    return false;
                }
                // //建立对话前阻止上传
                // if(!mobile_client.params["m_success"] && !mobile_client.params["in_lword"]){
                // //alert("建立对话中，请稍候");
                //     commFun.basic.toastOut("建立对话中，请稍候","toast","toast_text")//对话异常
                //     return false;
                // }
                var html,
                    data_id = file.id,
                    size = file.size>1024? Math.floor(file.size/1024)>1024? Math.floor(file.size/1024/1024)+"M":Math.floor(file.size/1024)+"KB":Math.floor(file.size)+"B";

                if(file.size/1024/1024>=100){
                    alert('文件不能超过100M！')//上传视音频/图片不能超过100M
                    $('.process-wrap').hide();
                    uploader.cancelFile( file );
                    return false;
                };
                var file_type_arr =['jpeg','gif','png','jpg',"fla","pdf","txt","doc","xls","docx","xlsx","tmp","html","wps","ppt","swf","avi","mpeg","asf","wmv","rm","rmvb","mp3","ape","wma","wav","zip","rar","mp4"];

                if($.inArray(file.ext,file_type_arr) == -1){
                    alert('暂不支持该格式！');//暂不支持该格式!
                    $('.process-wrap').hide();
                    uploader.cancelFile( file );
                    return false;
                }

                //图片上传预览 && 视音频及文件上传预览
                if(file.ext == 'jpg' || file.ext == 'png' || file.ext == 'gif' || file.ext == 'jpeg'){
                    html = '<div class = "pc-customer">'+
                    '<div class="upload-wrap pc-customer-info font14" id = "'+data_id+'">'+
                        '<div class="msg_img fr">'+
                            '<div class="process-wrap">'+
                                '<span class="processLong">'+
                                    '<span class="processSmall">'+
                                    '</span>'+
                                '</span>'+
                            '<span class="upload-button"></span></div>'+
                            '<div class="statusIcon"></div>'+
                            '</div>'+
                        '</div>'+
                        '</div>';
                    $("#talk_content").append(html);
                    var $img = $("#"+file.id).find(".msg_img");
                    uploader.makeThumb( file, function( error, ret ) {
                        _this.height = file._info.height;
                        _this.width = file._info.width;
                        if ( error ) {
                            $img.text('请重新上传');//预览错误
                        } else {
                            $img.prepend("<img src='"+ret+"' />");
                        }
                    });
                }else {
                    html = '<div class = "pc-customer">'+
                    '<div class="upload-wrap pc-customer-info font14" id = "'+data_id+'">'+
                            '<div class="msg_file fr">'+
                                '<p class="file-header font12">'+
                                    '<span class="fileName" title="'+file.name+'">'+mobile_client.beforeRender(file.name)+'</span>'+
                                    '<span class="fileSize fr">'+size+'</span>'+
                                '</p>'+
                                '<div class="process-wrap"><span class="processLong"><span class="processSmall"></span></span><span class="upload-button"></span></div>'+
                                '<div class="uploadStatus font12">上传中</div>'+
                            '</div>'+
                        '</div>'+
                        '</div>';
                    $("#talk_content").append(html)
                }
            });

            //上传前
            uploader.on("beforeFileQueued", function(file) {

                // console.log('图片上传地址2------'+'http://'+alias+'/upload_img_file.php?company_id='+cid);
                // sdkSocket.postMsg('图片上传地址2------'+'http://'+alias+'/upload_img_file.php?company_id='+cid,'print');

                $(".popup").hide();
                $(".icon-fold").removeClass('isOpen')
                $(".icon-fold").css("transform","rotate(0deg)")
                mobile_client.scroll();
                file.ext = file.ext.toLowerCase();
                // var file_type_arr = ['jpeg','gif','png','jpg',"fla","pdf","txt","doc","xls","docx","xlsx","tmp","html","wps","ppt","swf","avi","mpeg","asf","wmv","rm","rmvb","mp3","ape","wma","wav","zip","rar","mp4"];
                // //提前判断是否开启视音频
                // console.log(http_pro+kfs3_host+"/index.php?m=Home&c=MediaUpload&a=before_upload&arg="+arg)
                // $.ajax({
                //     type:"post",
                //     url:http_pro+kfs3_host+"/index.php?m=Home&c=MediaUpload&a=before_upload&arg="+arg,
                //     data:{
                //         "company_id":company_id,
                //     },
                //     async:false,
                //     success:function (res) {
                //         res=JSON.parse(res);
                //         if(res.status !='200') has_opened=false;
                //         else has_opened=true;
                //     }
                // });
                // //如果未开启过，直接进入旧文件传输口
                // if(!has_opened) return true;

                // //如果出现余额不足等问题，重置url，请求原php地址
                // if(file.flag==true){
                //     // this.options.formData={"company_id":company_id};
                //     this.options.fileVal="userupload";
                //     this.options.server=_this.uploadURL;
                //     file.flag=false;
                //     return true;
                // }
                // if(file.ext == 'mp4'||file.ext == 'mp3'||file.ext == 'wav'){
                //     // this.options.formData={"company_id":company_id};
                //     this.options.fileVal="userfile";
                //     this.options.server=http_pro+kfs3_host+"/index.php?m=Home&c=MediaUpload&a=upload&arg="+arg+"&company_id="+company_id;
                // }
            });

            $("#talk_content").on('click', '.upload-button', function() {
                uploader.cancelFile( $(this).parents(".upload-wrap").attr("id") );
                $("#"+$(this).parents(".upload-wrap").attr("id")).find(".process-wrap").hide();
                $("#"+$(this).parents(".upload-wrap").attr("id")).find(".uploadStatus").text("已取消上传").css("color","#8DA2B5");//已取消上传
            })
            // 重新上传
            $("#talk_content").on("click",".statusIcon",function(){
                uploader.retry($(this).parents(".upload-wrap").attr("id"));
                $(this).parents(".upload-wrap").find(".statusIcon").hide();
                $(this).parents(".upload-wrap").find(".process-wrap").show();
                $(this).parents(".upload-wrap").find(".uploadStatus").text("上传中").css("color","#8DA2B5");
            });


            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function(file, percentage) {
                $("#"+file.id).find(".process-wrap .processSmall").css("width",Math.floor(percentage * 100) + "%");

            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess', function (file, response) {
                var file_url = "";
                var type = response.type;
                //非视音频
                if(response.upload == 'success'){
                    //上传成功后展示图片
                    if (type == 'img') {
                        var new_url = '<img src="'+ response.url +'?&w='+_this.width+'&h='+_this.height+'" />';
                        mobile_client.sendMsg(new_url,true);
                        
                        console.log('图片上传地址2.3------'+new_url);
                        sdkSocket.postMsg('图片上传地址2.3------'+new_url,'print');

                        $(".upload-image.fr").remove();
                        var $img = $("#"+file.id).children(".msg_img");
                        $img.html("").append(new_url);
                    }else if(type == 'file'){
                        file_url = http_pro+alias+"/down_file.php?type=srv&company_id="+company_id+"&file="+response.real_name;
                        
                        // 暂时先不编码
                        // file_url = encodeURIComponent(file_url);

                        // 走sdk发送
                        var data = {
                            name : file.name,
                            size : file.size,
                            url : file_url,
                            fileType : type
                        };
                        mobile_client.sendFil(data);

                        $("#"+file.id).find(".uploadStatus").css("color","#1E88E5").text("上传成功")
                        $("#"+file.id).find(".process-wrap").hide();
                        return false;
                    }
                }else if(this.options.server.indexOf("down_file.php") != -1){
                    $("#"+file.id).find(".uploadStatus").text("上传失败").css("color","#FF4C4C");//上传失败
                    $("#"+file.id).find(".statusIcon").show();
                    return false;
                }

                // if(has_opened&&file.ext == "mp4"||file.ext == 'mp3'||file.ext == 'wav'){
                //     if(response.status=='200'){
                //         if(file.ext=="mp4"){
                //             //上传视频文件
                //             uploadResponse(file,response,"video",file.name);
                //             // var video_url ="<video src='"+response.url+"' controls='controls' preload='load'>抱歉，你的浏览器不支持视频播放</video><img class='video_bg' src='./src/img/video_bg200.png' alt=''>";
                //             var video_url ='<div style="overflow:hidden;"><div class="upload-wrap"><div class="msg_file fl"><p class="file-header font12"><span class="fileName">'+mobile_client.beforeRender(file.name)+'</span></p><div class="uploadStatus color-blue fr"><a href="'+response.url+'">点击下载</a></div><div class="statusIcon"></div></div></div></div>';
                //             var $video = $("#"+file.id).find(".msg_file").addClass("msg_video");
                //             $video.html("").append(video_url);
                //             mobile_client.scroll();
                //             return true;
                //         }else if(file.ext == 'mp3'||file.ext == 'wav'){
                //             //上传音频文件
                //             uploadResponse(file,response,"audio",file.name);
                //             // var audio_url ="<audio src='"+response.url+"' controls='controls' controlsList='nodownload' >抱歉，你的浏览器不支持音频播放</audio>";
                //             var audio_url ='<div style="overflow:hidden;"><div class="upload-wrap"><div class="msg_file fl"><p class="file-header font12"><span class="fileName">'+mobile_client.beforeRender(file.name)+'</span></p><div class="uploadStatus color-blue fr"><a href="'+response.url+'">点击下载</a></div><div class="statusIcon"></div></div></div></div>';
                //             var $audio = $("#"+file.id).find(".msg_file").addClass("msg_audio");
                //             $audio.html("").append(audio_url);
                //             mobile_client.scroll();
                //             return true;
                //         }
                //     }else{
                //         uploadResponse(file,response,"cfile",file.name);
                //         var $file = $("#"+file.id).find(".msg_file");
                //         $file.find(".process-wrap").remove();
                //         $file.find(".uploadStatus").css("color","#1E88E5").text("上传成功")
                //         file.flag=true;
                //         this.upload(file);
                //     }
                //     return false;
                // }

            });
            // 文件上传失败，显示上传出错。
            uploader.on('uploadError', function(file) {
                $("#"+file.id).find(".process-wrap").hide();
                $("#"+file.id).find(".uploadStatus").text("上传失败").css("color","#FF4C4C");//上传失败
                $("#"+file.id).find(".statusIcon").show();
            });

            //完成上传完了，成功或者失败
            uploader.on('uploadComplete', function(file) {
                //重置url
                this.options.formData={"company_id":company_id};
                this.options.fileVal="userupload";
                this.options.server=_this.uploadURL;
            });

            }
        }

        var file_upload = new FileUpload('file-picker','https://'+alias+'/upload_sdk.php?company_id='+cid);
        file_upload.init();

        urlFlag = false;


        // 上传=============================end==================================================
        //文件上传返回
        function uploadResponse(file,response,type,filename){
            if(type=='video'||type=='audio'){
                var file_url = response.url+"*"+filename;
            }else{
                var file_url = http_pro+alias+"/down_file.php?type=srv&company_id="+company_id+"&file="+response.real_name;
            }
            file_url = encodeURIComponent(file_url);
            // 走sdk发送
            var data = {
                name : file.name,
                size : file.size,
                url : file_url,
                fileType : type
            };
            mobile_client.sendFil(file_url,type); // 发送文件给客服
            $("#"+file.id).find(".uploadStatus").css("color","#1E88E5");//上传成功
            try{
                clearInterval(carousel_id);
            }catch(e){}
        }
    };

    // 禁止webview系统弹出框
    // document.body.style.webkitTouchCallout='none';

</script>
</html>
